<template>
  <div class="project-pane">
    <el-card v-loading="loading" shadow="hover">
      <template #header>
        <div style="width: 100%">
          <el-row>
            <el-col :span="22"><label>所有项目</label></el-col>
            <el-col :span="2"
              ><el-button @click="queryProjectQueue">刷新</el-button></el-col
            >
          </el-row>
        </div>
      </template>
      <div v-if="projectList.length > 0">
        <el-row v-for="(group, index) in groupedProjectList" :key="index">
          <el-col :span="6" v-for="project in group" :key="project.id">
            <div style="padding: 1vh">
              <ProjectCard :project="project">
                <template #other>
                  <el-row>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="12"> 待检人数：</el-col>
                        <el-col :span="12"> {{ project.unFinished }} </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="12"> 已检人数：</el-col>
                        <el-col :span="12"> {{ project.finished }} </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </template>
              </ProjectCard>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-empty image-size="10" v-else description="暂无项目" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { IClientProject } from "@/api/queue/types";
import ProjectCard from "@/views/client/patient/components/project-card.vue";
import { queryAllProjectQueue } from "@/api/queue";

const projectList = ref<IClientProject[]>([]);
const loading = ref(false);

// 计算属性：将projectList每三个元素分为一组
const groupedProjectList = computed(() => {
  return projectList.value.reduce(
    (groups: any, project: IClientProject, index) => {
      const groupIndex = Math.floor(index / 5);
      if (!groups[groupIndex]) {
        groups[groupIndex] = [];
      }
      groups[groupIndex].push(project);
      return groups;
    },
    []
  );
});

const queryProjectQueue = () => {
  loading.value = true;
  queryAllProjectQueue()
    .then((res) => {
      projectList.value = res.data;
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  queryProjectQueue();
});
defineExpose({ queryProjectQueue });
</script>

<style scoped lang="scss">
.project-pane {
}
</style>
